import React, { FC, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Space, Divider, Tag, Popconfirm, Modal, message } from 'antd'
import { Link } from 'react-router-dom'
import {
    EditOutlined,
    LineChartOutlined,
    StarOutlined,
    CopyOutlined,
    DeleteOutlined,
    ExclamationCircleOutlined,
} from '@ant-design/icons'
import { useRequest } from 'ahooks'
import { updateQuestionServices, duplicateQuestionServices } from '../services/question'
import styles from './QuestionCard.module.scss'
const { confirm } = Modal

type PropsType = {
    _id: string
    title: string
    isStar: boolean
    isPublished: boolean
    anserCount: number
    createdAt: string
}

const QuestionCard: FC<PropsType> = props => {
    const nav = useNavigate()
    const { _id, title, anserCount, createdAt, isPublished, isStar } = props
    // 修改标星
    const [isStarState, setIsStarState] = useState(isStar)
    const { loading: changeStarLoading, run: changeStar } = useRequest(
        async () => {
            await updateQuestionServices(_id, { isStar: !isStarState })
        },
        {
            manual: true,
            onSuccess(res) {
                setIsStarState(!isStarState)
                message.success('已更新')
            },
        }
    )
    // 复制问卷
    // function duplicateHandle() {
    //     message.info('执行复制')
    // }
    const { loading: duplicateStarLoading, run: duplicateHandle } = useRequest(
        // async () => {
        //     const data = await duplicateQuestionServices(_id)
        //     return data
        // },
        async () => await duplicateQuestionServices(_id),
        {
            manual: true,
            onSuccess(result: any) {
                message.success('复制成功')
                nav(`/question/edit/${result.id || result._id}`)
            },
        }
    )

    // 删除问卷提示
    const deleteHandler = () => {
        confirm({
            title: '是否确定删除该问卷？',
            icon: <ExclamationCircleOutlined />,
            onOk: deleteQuestionHandle,
        })
    }

    // 删除问卷
    const [isDeletedState, setIsDeletedState] = useState(false)
    const { loading: deleteQuestionLoading, run: deleteQuestionHandle } = useRequest(
        async () => await updateQuestionServices(_id, { isDeleted: true }),
        {
            manual: true,
            onSuccess(result) {
                setIsDeletedState(true)
                message.success('删除成功')
            },
        }
    )
    // 已经删除的问卷，不再渲染这个卡片
    if (isDeletedState) return null
    return (
        <div className={styles.container}>
            <div className={styles.title}>
                <div className={styles.left}>
                    <Link to={isPublished ? `/question/stat/${_id}` : `/question/edit/${_id}`}>
                        <Space>
                            {isStarState && <StarOutlined style={{ color: 'red' }} />}
                            {title}
                        </Space>
                    </Link>
                </div>
                <div className={styles.right}>
                    <Space>
                        {isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>}
                        <span>答卷：{anserCount}</span>
                        <span>{createdAt}</span>
                    </Space>
                </div>
            </div>
            <Divider style={{ margin: '12px 0' }}></Divider>
            <div className={styles['button-container']}>
                <div className={styles.left}>
                    <Space>
                        <Button
                            type="text"
                            size="small"
                            icon={<EditOutlined />}
                            onClick={() => nav(`/question/edit/${_id}`)}
                        >
                            编辑问卷
                        </Button>
                        <Button
                            type="text"
                            size="small"
                            icon={<LineChartOutlined />}
                            onClick={() => nav(`/question/stat/${_id}`)}
                            disabled={!isPublished}
                        >
                            问卷统计
                        </Button>
                    </Space>
                </div>
                <div className={styles.right}>
                    <Space>
                        <Button
                            type="text"
                            size="small"
                            icon={<StarOutlined />}
                            onClick={changeStar}
                            disabled={changeStarLoading}
                        >
                            {isStarState ? '取消星标' : '添加标星'}
                        </Button>
                        <Popconfirm
                            title="是否确认复制该问卷？"
                            description=" "
                            onConfirm={duplicateHandle}
                            // onCancel={cancel}
                            okText="确定"
                            cancelText="取消"
                            disabled={duplicateStarLoading}
                        >
                            <Button type="text" icon={<CopyOutlined />}>
                                复制
                            </Button>
                        </Popconfirm>
                        <Button
                            type="text"
                            icon={<DeleteOutlined />}
                            onClick={deleteHandler}
                            disabled={deleteQuestionLoading}
                        >
                            删除
                        </Button>
                    </Space>
                </div>
            </div>
        </div>
    )
}

export default QuestionCard
